<template>
    <div class="fasongjilu">

        <div class="center">

                <div class="right">
            
                    <div style="height: 16px; width: 100%; background: #EFEFEF;"></div>
                    <div class="powertop">

					<router-link class="powertopli " to="/duanxinlinshi/renwuguanli">任务管理</router-link>
					<router-link class="powertopli " to="/duanxinlinshi/addrenwu2">指定号码发送短信</router-link>
					<router-link class="powertopli powertopact" to="/duanxinlinshi/fasongjilu">发送记录</router-link>
                </div>
                <div class="conlist" v-loading='loading'>
                    <div class="flex flexbt renguantop">
                        <el-form ref="form" @submit.native.prevent v-model="form" label-width="80px" class="flex">
                            <el-form-item label="类别:">
                                <el-select v-model="classs"  placeholder="请选择">
                                    <el-option label="下单提醒" value="120"></el-option>
                                    <el-option label="照片未上传提醒" value="150"></el-option>
                                    <el-option label="照片不合格提醒" value="-200"></el-option>
                                    <el-option label="生产失败通知" value="-460"></el-option>
                                    <el-option label="已发货提醒" value="550"></el-option>
                                </el-select>
                            </el-form-item>

                            <el-form-item label="任务名称">
                              <el-input v-model="name"></el-input>
                            </el-form-item>
                            <el-form-item label="手机号码">
                              <el-input v-model="mobile"></el-input>
                            </el-form-item>
                            <!-- <el-form-item label="发送状态:">
                                <el-select v-model="status"  placeholder="请选择">
                                    <el-option label="已发送" value="1"></el-option>
                                    <el-option label="待发送" value="0"></el-option>
                                </el-select>
                            </el-form-item> -->
                            <el-form-item label="发送时间:">
                                    <el-date-picker @change="timechange" v-model="time" :clearable="false" value-format="yyyy-MM-dd" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
                            </el-form-item>
                            <el-button type="danger" @click="search" style="margin-left: 20px; height: 36px !important;">搜索</el-button>
                        </el-form>
                    </div>

                    <div class="list listth flex">
                        <div class="th">类别</div>
                        <div class="th">任务名称</div>
                        <div class="th">订单ID</div>
                        <div class="th">手机号码</div>
                        <div class="th">短信内容</div>
                        <div class="th">发送时间</div>
                        <div class="th">发送状态</div>
                        <div class="th">实际扣费（条）</div>
                    </div>
                    <div class="list listtd flex" v-for="item in list" :key="item.id">
                        <div class="td" v-if="item.class == 120">下单提醒</div>
						<div class="td" v-if="item.class == 789">群发短信</div>
                        <div class="td" v-if="item.class == 150">照片未上传提醒</div>
                        <div class="td" v-if="item.class == -200">照片不合格提醒</div>
                        <div class="td" v-if="item.class == -460">生产失败通知</div>
                        <div class="td" v-if="item.class == 550">已发货提醒</div>
                        <div class="td">
                            <el-tooltip effect="dark" popper-class="tooltip" placement="top">
                              <div slot="content">{{item.name}}</div>
                              <div>{{item.name}}</div>
                            </el-tooltip>
                        </div>
                        <div class="td">{{item.order_id}}</div>
                        <div class="td">{{item.mobile}}</div>
                        <div class="td">
                            <el-tooltip effect="dark" popper-class="tooltip" placement="top">
                              <div slot="content">{{item.content}}</div>
                              <div>{{item.content}}</div>
                            </el-tooltip>
                        </div>
                        <div class="td">{{item.created_at}}</div>
                        <div class="td" v-if="item.status == 1">发送成功</div>
						<div class="td" v-if="item.status != 1">发送失败</div>
                        <div class="td">1</div>
                    </div>
                    <el-pagination style="text-align: right; padding: 20px;" background layout="total,prev, pager, next" :current-page="page" @current-change="fanye" :page-size="pagesize" :total="total"></el-pagination>
                </div>
            </div>
        </div>

       <!-- <foot></foot> -->
    </div>

</template>

<script>
    import axios from 'axios'
    import top from '@/components/top.vue'
    import left from '@/components/left.vue'
    import foot from '@/components/foot.vue'
    import moment from "moment";
    export default {
        components: {
            "left": left,
            "top": top,
            "foot": foot,
        },
        name: "fasongjilu",
        data() {
            return {
                total:0,
                pagesize:20,
                page:1,
                list:"",
                loading:true,
                classs:"",
                name:"",
                status:"",
                time:"",
                mobile:"",
                start:"",
                end:"",
                form:""
            }
        },
        created() {

          this.getlist()
        },
        mounted() {

        },
        methods: {
            timechange:function(){
                this.start = this.time[0]
                this.end = this.time[1]
            },
            search:function(){
                this.getlist()
            },
            //翻页
            fanye:function(page){
            	this.loading = true
            	this.page = page
            	this.getlist()
            },
            //获取列表
            getlist:function(){
                var that = this
                axios.get('/api/plan-market/message/getduanxinjilu?page='+this.page+'&page_size='+this.pagesize+'&class='+this.classs+'&name='+this.name+'&mobile='+this.mobile+'&start='+this.start+'&end='+this.end)
                	.then(response => {
                		if(response.data.msg.code == 0){
                              that.list = response.data.data.data
                              that.total = response.data.data.total
                              that.loading = false
                		}else{
                			that.$message.error(response.data.msg.info);
                		}
                	})
            },
        }
    }
</script>

<style lang="scss" scoped>
    .fasongjilu{ margin: 0; padding: 0; background: #EFEFEF;
        .center{ width: 1366px; margin: 0 auto; display: flex; justify-content: space-between;
    		.right{ flex-basis: 1166px; background: #EBECEF;
                .title{border-bottom: 1px #EAEAEA solid;  line-height: 45px; padding-left: 30px; font-size: 16px; background: #F9F9F9; color: #727272}
            }
            .powertop{ display: flex; width: 640px; }
            .powertopli{ flex-basis: 160px; line-height: 45px; border-top: 4px #EBECEF solid; color: #727272; border-right: 1px #EAEAEA solid; font-size: 14px; text-align: center;}
            .powertopact{ background: #FFFFFF; border-top: 4px #DD2727 solid;}

            .conlist{ padding-bottom: 20px; background: #FFFFFF; min-height: 800px;
                .flex{ display: flex; flex-wrap: wrap;}
                .flexbt{ justify-content: space-between;}
                .renguantop{ padding: 20px; padding-bottom: 10px; border-bottom: 1px #EAEAEA solid;
                  .jiediand{ font-size: 16px; line-height: 30px; margin-right: 20px;}
                  .jiedianx{ font-size: 14px; color: #F1A533;  line-height: 35px;}
                  .duanxinn{ color:#B8B8B8;  line-height: 35px; margin-right: 10px;}
                  .duanxinu{ color:#DF3434;  line-height: 35px; margin-right: 10px;}
                  .duanxinb{ background: #EEF7FF;  line-height: 35px; color:#FFFFFF; padding: 0 10px; border-radius: 3px;}
                }
                .xinjianrenwu{ padding: 20px; }
                .list{ text-align: center; line-height: 50px;
                  .th{ flex: 1; background: #EAEAEA; font-weight: bold;}
                  .td{ flex: 1; border-bottom: 1px #EAEAEA solid; height: 50px; overflow: hidden; font-size: 14px;}
                }
            }
    	}
    }
</style>
